<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus';
import { ElMessageBox } from 'element-plus';
import { getTeacherList, getUserList } from '@/counselor';
import { teacherListType } from '@/counselor/module';
import { getToken } from '@/utils/auth';

// 请求传参
let params = ref<teacherListType>({
    pageSize: 10,
    pageNum: 1,
    name: '',
    mobile: ''
});

// 搜索
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
    name: '',
    mobile: ''
});

const submitForm = () => {
    params.value.name = ruleForm.name;
    params.value.mobile = ruleForm.mobile;
    getList();
};
// 重置
const resetForm = () => {
    ruleForm.name = '';
    ruleForm.mobile = '';
    params.value.name = ruleForm.name;
    params.value.mobile = ruleForm.mobile;
    getList();
};

// 弹框
const dialogVisible = ref(false);
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done();
        })
        .catch(() => {
            // catch error
        });
};

// 表格
const tableData = ref();

// 列表请求
function getList() {
    getTeacherList(params.value).then((res: any) => {
        if (res.code === 200) {
            console.log(res);
            tableData.value = res.rows;
            total.value = res.total;
        }
    });
}

getList();

// 改变页数
const total = ref();

function currentChange(val: number) {
    params.value.pageNum = val;
    getList();
}

//
const deleteRow = (index: number) => {
    tableData.value.splice(index, 1);
};
// 弹框内容
const ruleFormAdd = reactive({
    name: '',
    userId: ''
});
const rules = reactive({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
    ]
});
// 头像上传
const imageUrl = ref('');

function handleAvatarSuccess(response: any, uploadFile: any) {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!);
}

const action = import.meta.env.VITE_APP_BASE_API + '/common/upload';
const header = reactive({
    Authorization: 'Bearer ' + getToken()
});
// 请求学生列表
getUserList({ pageSize: 10000, pageNum: 1 }).then((res: any) => {
    console.log(res);
    userList.value = res.rows;
});
const userList = ref();
</script>

<template>
    <div class="app-container">
        <!-- 搜索、重置 -->
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            inline
        >
            <el-form-item label="姓名">
                <el-input v-model="ruleForm.name" type="text" />
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="ruleForm.mobile" type="text" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">
                    搜索
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
        <!--添加按钮-->
        <el-button @click="dialogVisible = true" type="primary" style="margin-bottom: 15px">
            添加
        </el-button>
        <!--弹框-->
        <el-dialog
            v-model="dialogVisible"
            title="Tips"
            width="500"
        >
            <!-- 弹框内容-->
            <el-form
                ref="ruleFormRef"
                style="max-width: 600px"
                :model="ruleFormAdd"
                :rules="rules"
                label-width="auto"
                class="demo-ruleForm"
                status-icon
            >
                <el-form-item label="头像" prop="avatar">
                    <el-upload
                        class="avatar-uploader"
                        :action="action"
                        :headers="header"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                    >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="选择用户" prop="region">
                    <el-select v-model="ruleFormAdd.userId" placeholder="请选择用户">
                        <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" value="shanghai" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--表格-->
        <el-table highlight-current-row :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="用户名称" />
            <el-table-column prop="name" label="用户名称" />
            <el-table-column prop="mobile" label="联系电话" />
            <el-table-column prop="phone" label="办公电话" />
            <el-table-column prop="location" label="地址" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column label="操作" min-width="120">
                <template #default="scope">
                    <el-button
                        link
                        type="primary"
                        size="small"
                        @click.prevent="deleteRow(scope.$index)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        link
                        type="danger"
                        size="small"
                        @click.prevent="deleteRow(scope.$index)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--        分页-->
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="currentChange" />
    </div>

</template>

<style scoped lang="scss">
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
